<template>
  <div>
      <el-row>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col id="KeyDriverInfo"  :span="24">
               <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                   <tr>
                       <td style="text-align:left;font-weight:bold" colspan="2"><h3>事件基本信息</h3></td>
                     </tr>
                   <tr v-for="(v,k,i) in form" :key="i" v-if="k!=='spEventID'&&k!=='currentResponsiblePersonCertID'&& k!=='currentResponsiblePersonName'&&k!=='currentResponsiblePersonContact'">
                       <td class="tb_label">{{labels[i]}}</td>
                       <td>
                           <span v-if="k=='spEventKind'">
                               {{getEventKind(v)}}
                           </span>
                           <span v-else>
                                {{v}}
                           </span>
                       </td>
                   </tr>
                   <tr v-if="pics!=''">
                     <td class="tb_label">图像资料</td>
                     <td>
                       <span v-for="(v,i) of pics" :key="i">
                         <img :src="v.url" width="300" alt="">
                       </span>
                     </td>
                   </tr>
                   <tr v-if="video!==''">
                     <td class="tb_label">视频资料</td>
                     <td>
                       <video :src="video.url" controls width="600"></video>
                     </td>
                   </tr>
                   <template v-for="(k,i) of SAPerson">
                     <tr>
                       <td style="text-align:center;font-weight:bold" colspan="2">当事人({{i+1}})</td>
                     </tr>
                      <tr v-for="(x,y,z) of k" :key="z" v-if="y!=='spEventID'&&y!=='spEPersonsID'">
                        <td class="tb_label">{{label[z]}}</td>
                        <td>{{x}}</td>
                      </tr>
                   </template>

                    <tr>
                      <td colspan="2" align="center">
                        <el-button type="text" size="large" @click="printTable('KeyDriverInfo')">[打印]</el-button>
                      </td>
                  </tr>
               </table>
          </el-col>
            </el-tab-pane>
            <el-tab-pane label="流程信息" name="second">
              <el-col  :span="24">
                 <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;width:100%;height:100%"  cellspacing="0">

                    <tr v-if="DealingBasic&&DealingBasic.length>0">
                       <td style="text-align:left;font-weight:bold" colspan="2"><h3>事件处理信息</h3></td>
                     </tr>
                     <template v-for="(k,i) of DealingBasic">
                     <tr>
                       <td style="text-align:center;font-weight:bold" colspan="2">处理信息({{i+1}})</td>
                     </tr>
                      <tr v-for="(x,y,z) of k" :key="z" v-if="y!=='speventID'&&y!=='skynetPatrolEventDealingID'">
                        <td class="tb_label">{{label2[z]}}</td>
                        <td>{{x}}</td>
                      </tr>
                   </template>
                   <tr v-if="DealingMedia.pictures&&DealingMedia.pictures.length>0">
                    <td style="text-align:center;font-weight:bold" colspan="2">
                     事件处理图像信息
                    </td>
                   </tr>
                   <tr v-if="DealingMedia.pictures&&DealingMedia.pictures.length>0">
                     <td class="tb_label">图像资料</td>
                     <td>
                       <span v-for="(v,i) of DealingMedia.pictures" :key="i">
                         <img :src="v.url" width="300" alt="">
                       </span>
                     </td>
                   </tr>
                   <tr v-if="DealingMedia.video&&DealingMedia.video.length>0">
                    <td style="text-align:center;font-weight:bold" colspan="2">
                     事件处理视频资料
                    </td>
                   </tr>
                   <tr v-if="DealingMedia.video&&DealingMedia.video.length>0">
                     <td class="tb_label">视频资料</td>
                     <td>
                       <span v-for="(v,i) of DealingMedia.video" :key="i">
                         <video :src="v.url" width="600" controls />
                       </span>
                     </td>
                   </tr>
                   <tr>
                   </tr>
                    <tr v-if="Check&&Check.length>0">
                   <td style="text-align:left;font-weight:bold" colspan="2"><h3>事件审核信息</h3></td>
                   </tr>
                   <template v-for="(k,i) of Check">
                     <tr>
                       <td style="text-align:center;font-weight:bold" colspan="2">审核信息({{i+1}})</td>
                     </tr>
                      <tr v-for="(x,y,z) of k" :key="z" v-if="y!=='speventID'&&y!=='skynetPatrolEventDealingID'">
                        <td class="tb_label">{{label3[z]}}</td>
                        <td>
                          <span v-if="y=='checkedResult'">
                            {{x==1?'审核通过':'审核未通过'}}
                          </span>
                          <span v-else>
                             {{x}}
                          </span>
                        </td>
                      </tr>
                   </template>
                   <tr v-if="Check.length==0&&DealingBasic.length==0&&Distribute.length==0">
                     <td>
                       <span style="text-align:center;padding:400px;color:#909399;font-size:30px">
                         事件未立案或尚未处理
                       </span>
                     </td>
                   </tr>
                    <tr v-if="Distribute&&Distribute.length>0">
                       <td style="text-align:left;font-weight:bold" colspan="2"><h3>事件经办信息</h3></td>
                    </tr>
                    <template v-for="(v,i) of Distribute">
                      <tr>
                        <td style="text-align:center;font-weight:bold" colspan="2">事件经办人({{i+1}})</td>
                      </tr>
                      <tr v-for="(x,y,z) of v" :key="z" v-if="y!=='speventID'&&y!=='skynetPatrolEventDistributeID'">
                        <td class="tb_label">{{label4[z]}}</td>
                        <td>{{x}}</td>
                      </tr>
                    </template>
                 </table>
              </el-col>
            </el-tab-pane>
          </el-tabs>
      </el-row>
  </div>
</template>

<script>
import * as api from "@/api/skynetManage"
export default {
  data() {
    return {
      activeName:'first',
      form: {
        spEventID:'',
        spEventName:"",             //'事件名称',
        spEventKind:"",             //'事件性质，如1=一般事件；2=重大事件；等',
        spEventTypeValue:"",        //'事件类型，如杀人、放火、抢劫等',
        spEventContent:"",
        spEventStartDateTime:"",
        spEventEndDateTime:"",
        spEventHappenLongitude:"",  //'地理经度信息',
        spEventHappenLatitude:"",   //'地理纬度信息',
        spEventStatusTypeValue:"",  //'当前事件处理的最新状态',
        currentRemarks:"",
        currentResponsiblePersonCertID:"",      //'当前经办人员身份证号',
        currentResponsiblePersonName:"",        //'当前经办人员姓名',
        currentResponsiblePersonContact:"",     //'经办人员联系方式',
        netGridID:'',
        realName:'',
        dept:'',
        mobileTel:''
      },
      labels: ["编号","事件名称","事件性质","事件类型", "事件内容","事件开始时间",
      "事件结束时间","经度","纬度","事件最新处理状态","当前备注","当前经办人员身份证号","当前经办人员姓名","经办人员联系方式","网格",'上报人','部门','电话'],
      label:['编号','事故编号','当事人身份证','当事人姓名','备注','当事人联系方式'],
      label2:['编号','姓名','处理人','处理日期','处理内容','备注','事故编号'],
      label3:['编号','审核人','所属部门','审核日期','审核结果','备注','事故编号'],
      label4:['编号','派发人姓名','所属部门','派发对象姓名','所属部门','开始时间','结束时间','备注','事故编号'],
      pics:[],
      video:{
          id:1,
          url:''
      },
      SAPerson:[],
      Check:[],
      DealingBasic:[],
      DealingMedia:{},
      Distribute:[]
    };
  },
  methods: {
    getEventKind(v){
      if(v==1){
        return '一般事件'
      }else if(v==2){
        return '重大事件'
      }else{
        return '简单事件'
      }
    },
    printTable(div) {
      var div_print = document.getElementById(div);
      var newStr = div_print.innerHTML;
      var oldStr = document.body.innerHTML;
      document.body.innerHTML = newStr;
      window.print();
      window.location.reload();
      window.body.innerHTML = oldStr;
      return false;
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  props:['id'],
  watch:{
    id:function(val){
      api.getSPDetail(this.id).then(res=>{
        this.form = res.data.SPEventBasic
        this.pics = res.data.SPEventMedia.pictures.length>0?res.data.SPEventMedia.pictures:''
        this.video = res.data.SPEventMedia.video.length>0?res.data.SPEventMedia.video[0]:''
        this.SAPerson = res.data.involvedPersons

        this.DealingBasic = res.data.dealingBasic
        this.DealingMedia = res.data.dealingMedia
        this.Check = res.data.checked
        this.Distribute = res.data.distribute
    })
    }
  },
  mounted() {
    api.getSPDetail(this.id).then(res=>{
        this.form = res.data.SPEventBasic
        this.pics = res.data.SPEventMedia.pictures.length>0?res.data.SPEventMedia.pictures:''
        this.video = res.data.SPEventMedia.video.length>0?res.data.SPEventMedia.video[0]:''
        this.SAPerson = res.data.involvedPersons

        this.DealingBasic = res.data.dealingBasic
        this.DealingMedia = res.data.dealingMedia
        this.Check = res.data.checked
        this.Distribute = res.data.distribute
    })
  }
};
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  border-bottom:1px solid darkgray;
  padding: 10px;
}

.tb_label {
  width: 20%;
  text-align: right;
}
</style>
